VUE获取网易云音乐接口，并实现歌词滚动效果 |
您所在的位置：网站首页 › el carretero歌词 › VUE获取网易云音乐接口，并实现歌词滚动效果 |
VUE获取网易云音乐接口，并实现歌词滚动效果
|
VUE获取网易云音乐接口，并实现歌词滚动效果
最近在捣腾个人博客，加了个播放音乐的模块，所以在这里记录一下歌曲播放歌词实时滚动效果的实现，顺便总结加深一下对各个知识点的理解。 GitHub地址 演示地址 功能还没开发完全，当前部分可通过导航栏进入到音乐模块，并点击如下歌手图进入。 先放一下效果图吧 这一部分主要是歌曲列表和当前歌曲信息 1、歌曲列表实现在这之前，关于网易云音乐接口的使用可以看网易云音乐API文档 思路： 获取歌曲数据 处理歌曲数据 渲染到视图上（1）在实例创建完成，也就是在created钩子函数这个时期，我们能够访问到data，computed，methods上的方法和数据了，那我们就可以向接口发送请求了 created() { //通过getSong()获取对应歌曲信息 this.getSong(this.$route.query.name); //在这之前，我是通过路由进入的该组件，所以会传递一个name歌手名字作为参数 };（2）接下来编写getSong()，通过axios获取数据，我们可以先打印出来看看 getSong(name) { let url = "https://api.imjad.cn/cloudmusic/?type=search&search_type=1&s=" + name + "&offset=1&limit=10"; //这里以第一页的十条数据为例 this.$axios .get(url) .then(res => console.log(res.data)) .catch(); }（3）打开控制台，很明显获取到的并不是我们最终想要的结果，所以接下来就需要在众多数据中提取出我们想要的信息。 一般歌曲列表需要的数据不外乎这几样 歌曲id 歌曲名字 歌手名字 歌曲时长我们随便点开一条去找，至于怎么找…就是一个个找，比如里面有个name属性，那么大概就是歌名了，接口文档里歌手对应的type是artist，那我们就找这个属性，如果没有的话那么大概率就是该单词缩写，所以我们点进去ar属性找到了我们想要的。 在这一步我们也能感受到在打代码的过程中，参数语义化的重要性了 |
这里主要有两个组件：歌曲信息组件和歌曲控制组件，歌曲控制组件还没有完善，这里主要记录一下歌曲信息组件的实现
（4）最后定位到我们想要的数据，我们用formatSongs()这个方法来进行整理【本文地址】
今日新闻 |
推荐新闻 |